<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table tr th,td{
            border: 1px solid black;
            text-align: center;
        }
        table{
            border: 1px;
            cell-padding:0;
            cell-spacing:0;
            width: 80%;
            margin-top: 20px;
        }
        table thead{
            background-color:#b3d7ff ;
        }
    </style>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/bootstrap.css">

    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap-table1.15.3.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/bootstrap-min-4.3.1.js"></script>
    <script src="../js/pintuer.js"></script>
    <script src="../js/initMain.js"></script>
    <script type="text/javascript">
        function initTable(){
            $("#tableInfo").bootstrapTable({
                method:"post",
                contentType:"application/json",
                url:"/mDesignProcedure/queryGreenMDesignProcedure.action",
                //设置交替行样式
                striped:true,
                //初始显示页数
                pageNum:1,
                //是否显示分页
                pagination:true,
                //设置是服务端分页还是客户端分页
                sidePagination:"server",
                //页大小
                pageSize:3,
                //分页列表
                pageList: [3,5,6,10],
                //上传到服务器的参数
                queryParams:function (data) {
                    return{
                        //计算页号，当前号
                        pageNum:(data.offset/data.limit)+1,
                        //计算页大小
                        pageSize: data.limit,
                    }
                },
                columns:[
                    {title:"设计单编号",field:"designId",align:"center"},
                    {title:"产品编号",field:"productId",align:"center"},
                    {title:"产品名称",field:"productName",align:"center"},
                    {title:"设计人",field:"designer",align:"center"},
                    {title:"登记时间",field:"registerTime",align:"center"},
                    {title:"工时总成本",field:"costPriceSum",align:"center"},
                    {title:"变更",field:"id",align:"center",formatter:function (value,row,index) {
                            var btn="<a href='#'  onclick='changeProcedure("+JSON.stringify(row)+")'>变更</a>";
                            return btn;
                        }},
                ]

            })
        }
        $(function () {

            initTable();
            /*//添加工序
            $("#addProcedureBtn").click(function () {
                $("#addDesignModel").modal("show");
            })
            //删除工序
            $("#delProcedureBtn").click(function ()  {
                var length=$(".procedureCheck:checked").length;
                // alert(length);
                if(length<=0){
                    alert("请至少勾选一个进行删除！")
                }else{
                    for(var i=0;i<length;i++){
                        var obj=$(".procedureCheck:checked").get(i).parentNode.parentNode;
                        obj.remove();
                    }
                }
            })*/
            //预览
            $("#readBtn").click(function () {
                //判断表格的行是否大于一
                if($("#tBody tr").length>0){
                    var costPriceSum=0;

                    for(var i=0;i<$("#tBody tr").length;i++){

                        //工时数
                        var labourHourAmount=$(".labourHourAmount").eq(i).val();
                        // alert(labourHourAmount);
                        //工时单位成本
                        var costPrice=$(".costPrice").eq(i).val();
                        // alert(costPrice);
                        $("#tBody tr").eq(i).children("td").eq(7).text(labourHourAmount*costPrice);
                        costPriceSum+=labourHourAmount*costPrice;
                    }
                    $("#costPriceSum").text(costPriceSum);
                }else {
                    alert("请至少添加一个工序！");
                }

            })
            //点击变更
            $("#changeProcedureBtn").click(function () {
                // var data=$("#addProcedureForm").serialize();
                var arr=[];

                mDesignProcedureObj.procedureCheckTime=$("#checkTime").text();
                mDesignProcedureObj.procedureChecker=$("#checker").text();
                mDesignProcedureObj.costPriceSum=$("#costPriceSum").text();
                mDesignProcedureObj.procedureDescribe=$("#procedureDescribe").val();
                mDesignProcedureObj.procedureCheckTag=$("input[type='radio']:checked").val();

                // alert(mDesignProcedureObj.id);
                arr.push(mDesignProcedureObj);
                //获取表格中的对象
                for(var i=0;i<$("#tBody tr").length;i++){
                    var tr=$("#tBody tr").get(i);
                    //编号
                    var id=$(".id").eq(i).text();
                    // alert(id);
                    //工时数
                    var labourHourAmount=$(".labourHourAmount").eq(i).val();
                    //工时单位
                    var amountUnit=$(".amountUnit").eq(i).val();
                    // alert(amountUnit);
                    //工时单位成本
                    var costPrice=$(".costPrice").eq(i).val();
                    //工时成本小计
                    var subtotal=$(".subtotal").eq(i).text();

                    var mDesignProcedureDetails=new Object();

                    mDesignProcedureDetails.id=id;
                    mDesignProcedureDetails.labourHourAmount=labourHourAmount;
                    mDesignProcedureDetails.amountUnit=amountUnit;
                    mDesignProcedureDetails.costPrice=costPrice;
                    mDesignProcedureDetails.subtotal=subtotal;

                    arr.push(mDesignProcedureDetails);
                }

                $.ajax({
                    url:"/mDesignProcedure/changeProcedure.action",
                    method: "post",
                    traditional:true,
                    data : {
                        "data" : JSON.stringify(arr)
                    },
                    dataType:"json",
                    success:function (data) {
                        $("#addModel").modal("hide");
                        $("#tableInfo").bootstrapTable("refresh");
                    },
                    error:function (data) {
                        alert("变更失败！");
                    }

                })
            })
        })
        var mDesignProcedureObj;
        //审核按钮
        function  changeProcedure(mDesignProcedure) {

            $.ajax({
                url:"/mDesignProcedureDetails/queryMDesignProcedureDetailsByPId",
                type:"post",
                data:"pId="+mDesignProcedure.id,
                success:function (data) {
                    mDesignProcedureObj=mDesignProcedure;
                    // alert(dFileObj.PRODUCT_ID);
                    $("#addModel").modal("show");
                    $("#tBody").empty();
                    // $(".aa").attr("disabled",false);
                    // alert(mDesignProcedure.id);
                    $("#productId").text(mDesignProcedure.productId);
                    $("#productName").text(mDesignProcedure.productName);
                    $("#designId").text(mDesignProcedure.designId);
                    $("#designer").text(mDesignProcedure.designer);
                    $("#checker").text(localStorage.getItem("userName"));
                    var date=new Date();
                    $("#checkTime").text(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
                    $("#procedureDescribe").val(mDesignProcedure.procedureDescribe);
                    $("#costPriceSum").text(mDesignProcedure.costPriceSum);
                    // alert(data);
                    for(var i=0;i<data.length;i++){
                        var mDesignProcedureDetail=data[i];
                        var trnew=$("<tr>");
                        var td=$("<td class='id'>");
                        td.html(mDesignProcedureDetail.id);
                        // count++;
                        var td1=$("<td>");
                        td1.text(mDesignProcedureDetail.procedureName);
                        var td7=$("<td>");
                        td7.html(mDesignProcedureDetail.procedureId);
                        var td2=$("<td>");
                        td2.text(mDesignProcedureDetail.procedureDescribe);
                        //工时数
                        var td3=$("<td>");
                        td3.html("<input  style='width: 100px;border: none' class='labourHourAmount' value='"+mDesignProcedureDetail.labourHourAmount+"'/>");
                        var td4=$("<td>");
                        td4.html("<select class='amountUnit'>\n" +
                        "                        <option value='day'>天</option>\n" +
                        "                        <option value='hour'>小时</option>\n" +
                        "                        <option value='minute'>分钟</option>\n" +
                        "                    </select>");

                        var td5=$("<td>");
                        // td5.html("<input  style='width: 100px;border: none' class='amountUnit'/>");
                        td5.html("<input  style='width: 100px;border: none' class='costPrice' value='"+mDesignProcedureDetail.costPrice+"'/>");
                        var td6=$("<td class='subtotal'>");
                        td6.html(mDesignProcedureDetail.subtotal);

                        trnew.append(td);
                        trnew.append(td1);
                        trnew.append(td7)
                        trnew.append(td2);
                        trnew.append(td3);
                        trnew.append(td4);
                        trnew.append(td5);
                        trnew.append(td6);
                        // alert(tr.children[0].innerText);
                        $("#tBody").append(trnew);
                        //默认选中单位
                        $(".amountUnit").eq(i).val(mDesignProcedureDetail.amountUnit);
                    }
                }
            })
        }

    </script>
</head>
<body>
    <div>
        <table id="tableInfo">

        </table>
    </div>
    <div class="modal  fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content" style="border: 1px solid black;">
                <div class="modal-header">
                    <div class="container">
                        <div class="row">
                            <div class="col-7" style="text-align: right">
                                <h5 class="modal-title" id="info" >
                                    生产工序设计单
                                </h5>
                            </div>
                            <div class="col-2"></div>
                            <div class="col-3" style="position: absolute;right: 10px">
                                <button class="btn btn-primary" id="readBtn">预览</button>
                                <button type="button" class="btn btn-primary" id="changeProcedureBtn">
                                    变更
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px">

                    </button>
                </div>
                <div class="modal-body">
                    <form id="addProcedureForm">
                        <div class="container">
                            <div class="row">
                                <div class="col-3" style="position: absolute;left: 50px">
                                    <span>设计单编号：</span>
                                </div>
                                <div class="col-4" style="position: absolute;left: 150px">
                                    <span  name="designId" id="designId"></span><br>
                                </div>
                                <div class="col-2" style="position: absolute;left: 520px">
                                    <span>设计人：</span>
                                </div>
                                <div class="col-3" style="position: absolute;left: 630px">
                                    <span  name="designer" id="designer"></span><br>
                                </div>

                            </div>
                        </div>
                        <br><br>
                        <div class="container">
                            <div class="row">
                                <div class="col-2" style="text-align:right">
                                    产品名称：
                                </div>
                                <div class="col-4">
                                    <span id="productName">笔记本</span>
                                </div>
                                <div class="col-2" style="text-align:right">
                                    产品编号：
                                </div>
                                <div class="col-4">
                                    <span id="productId" >20001002192001</span>
                                </div>
                            </div>
                        </div>
                       <br>

                        <table width="800px" style="margin-left: 20px">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>工序名称</th>
                                    <th>工序编号</th>
                                    <th>描述</th>
                                    <th>工时数</th>
                                    <th>工时单位</th>
                                    <th>工时单位成本</th>
                                    <th>工时成本小计(元)</th>
                                </tr>
                            </thead>
                            <tbody id="tBody">

                            </tbody>
                        </table><br>
                        <div class="container">
                            <div class="row">
                                <div class="col-2" style="text-align:right">
                                    变更人：
                                </div>
                                <div class="col-4">
                                    <span name="checker" id="checker"></span>
                                </div>
                                <div class="col-2" style="text-align:right">
                                    变更时间：
                                </div>
                                <div class="col-4">
                                    <span  name="checkTime" id="checkTime"></span>
                                </div>
                            </div>
                        </div><br>
                        <div style="position: absolute;left: 70px">
                            工时总成本：<span id="costPriceSum"></span>
                        </div><br><br>
                        <span style="margin-left: 55px">设计要求：</span>
                        <textarea style="width: 550px;margin-left: 150px" class="form-control" id="procedureDescribe">

                        </textarea>

                    </form>
                </div>
                <!--<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>

                </div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</body>

</html>